import React from 'react';
import echarts from 'echarts/lib/echarts';

// 引入柱状图
require('echarts/lib/chart/bar');
// 引入雷达图
require('echarts/lib/chart/radar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');


class Echart extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Echart';
        //  mode 两个选项
        //  athlete 运动员的分析图
        // match  比赛详情的两对的对比图
        this.state = {
          mode: props.mode,
          athleteDatas: props.athleteDatas,
          matchDatas: props.matchDatas
          // {
          //     team1: {
          //       attack: "",
          //       defense: "",
          //       defenseAttack: "",
          //     },
          //     team2 : {
          //       attack: "",
          //       defense: "",
          //       defenseAttack: "",
          //     }
          // }
        }
    }

    componentWillReceiveProps(nextProps) {
        console.log("echarts  Receive Props");
        console.log(nextProps);

        if( 'athlete' == this.state.mode ) {
          this.setState({
            athleteDatas: nextProps.athleteDatas,
          });
        } else {
          this.setState({
            matchDatas: {
              team1: nextProps.matchDatas.team1,
              team2: nextProps.matchDatas.team2
            }
          });
        };

    }

    setRadarEchart( datas ){
      let optionAthlete = {
          title: {
             // text: '联盟对比'
         },
         tooltip: {},
         legend: {},
         radar: {
             // shape: 'circle',
             indicator: [
                { name: '控制', max: 100},
                { name: '射门', max: 100},
                { name: '力量', max: 100},
                { name: '防守', max: 100},
                { name: '速度', max: 100},
             ]
         },
         series: [{
             type: 'radar',
             // name: '预算 vs 开销（Budget vs spending）',
             itemStyle: {normal: {areaStyle: {type: 'default'}}},
             areaStyle: {normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#94FF36' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#E3C10F' // 100% 处的颜色
                  }], false),
                  opacity: 1,

             }},
             lineStyle: {normal: {
                  // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果最后一个参数传 `true`，则该四个值是绝对的像素位置
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0, color: '#94FF36' // 0% 处的颜色
                  }, {
                    offset: 1, color: '#E3C10F' // 100% 处的颜色
                  }], false)
             }},
             data : [
                 {
                     value : datas,
                     name : '联盟对比'
                 }
             ]
         }]
      };
      return optionAthlete;
    }

    setBarEchart( direct , datas ) {
      console.log( direct);
      console.log( datas);
      // right
      let optionBar = {
          tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
            },
            grid: {
                left: '0',
                top: '3%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value',
                    max: '100',
                    axisLabel : {show: false},
                    axisTick : {show: false},
                    axisLine: {show: false},
                    splitLine: {show: false }
                    // nameTextStyle
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    axisTick : {show: false},
                    axisLine: {show: false},
                    data : [],
                    // data : ['进攻次数','防守次数','防反次数'],
                    position: 'right',
                    axisLabel : {
                        textStyle: {
                            color:' #fff',
                            fontSize: '12'
                        }
                    },
                }
            ],
            series : [
                {
                    name:'次数',
                    type:'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            textStyle: {
                              color: '#fff',
                              fontSize: '12'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#44A776',
                        },
                    },
                    barWidth: '8px',
                    // data:[0, 0, 0]
                    data:datas
                },
            ]
        }

        if( 'right' == direct ) {
          return optionBar;
        } else if('left' == direct ){
          // left
          optionBar.grid.right = '2%';
          optionBar.grid.left = '0';
          optionBar.xAxis[0].inverse = true;

          optionBar.yAxis[0].axisLabel.show = false;
          optionBar.yAxis[0].position ='left';
          optionBar.yAxis[0].axisLabel.data = [];
          optionBar.series[0].label.normal.position = 'left';
          return optionBar;
        } else {
          optionBar.tooltip.show = false;
          optionBar.yAxis[0].data = ['进攻次数','防守次数','防反次数'];
          optionBar.series[0].label.normal.show = false;
          optionBar.grid.right = '10%';
          // optionBar.grid.right = '25%';
          return optionBar;
        }
    }

    renderEchart () {

      if( "athlete" == this.state.mode)  {
        let {control, goals, power, defense, speed} = this.state.athleteDatas;
        let temp = [ control, goals, power, defense, speed ];
        console.log( `athlete datas  : ${temp}` );

        let myChart = echarts.init(document.getElementById('mainEchart'));
        myChart.setOption( this.setRadarEchart( temp ) );
      } else {
        // team1: {
        //   attack: "",
        //   defense: "",
        //   defenseAttack: "",
        // },
        // team2 : {
        //   attack: "",
        //   defense: "",
        //   defenseAttack: "",
        // }
        let dataTemp = this.state.matchDatas;
        let team1 = [ dataTemp.team1.attack, dataTemp.team1.defense, dataTemp.team1.defenseAttack ];
        let team2 = [ dataTemp.team2.attack, dataTemp.team2.defense, dataTemp.team2.defenseAttack ];

        let myLeftChart = echarts.init(document.getElementById('leftEchart' ));
        let myRightChart = echarts.init(document.getElementById('rightEchart'));
        let myCenterChart = echarts.init(document.getElementById('centerEchart'));

        // myRightChart.setOption(this.setBarEchart('right',[90, 70, 100]));
        myRightChart.setOption(this.setBarEchart('right',team1));
        // myLeftChart.setOption(this.setBarEchart('left', [90, 70, 100]));
        myLeftChart.setOption(this.setBarEchart('left', team2));
        myCenterChart.setOption(this.setBarEchart('center', [0, 0, 0] ));
      };
    }

    componentDidMount() {

      this.renderEchart();
    }

    componentDidUpdate(prevProps, prevState) {
        this.renderEchart();
    }

    render() {
        return (
            <div id = "mainEchart" className={"match" == this.state.mode?"match":"" } >
              <div id="leftEchart"></div>
              <div id="centerEchart"></div>
              <div id="rightEchart"></div>
            </div>
        );
    }
}

export default Echart;
